<template> 
	<view class="header" @click="pageClick">
		<van-tabs v-model="active" animated title-active-color="#00C5C1" custom-class="van-tabs" nav-class="tabs">
			<!-- 门店服务 -->
			<van-tab title="门店服务" tab-class="van-tab" title-style="font-size:32rpx" >
				<view class="tag-box">
					<view class="tag-box">
						<view class="tag-itembox" v-for="(item,index) in Storelist" :key="index">
							<view class="tabItem-left"><image src="/static/images/xitou.jpg" mode=""></image></view>
							<view class="tabItem-right">
								<view class="tabItem-right-1">
									<text space class="tabItem-right-1-text">
										{{ item.serviceName }}
										<text class="text">{{ item.serviceSubdivide }}</text>
									</text>
									<view class="tabItem-tag" @click.stop="showTotas(index)"><text>···</text></view>
									
								</view>

								<view class="tabItem-right-2">{{ item.serviceInner }}</view>
								<view class="tabItem-right-3">
									<view class="tabItem-right-3-view">
										<text>时间：预计用时{{ item.serviceTime }}小时</text>
										<text>销售:{{ item.serviceCount }}单</text>
									</view>
									<text class="tabItem-right-3-view-text">
										￥
										<text>{{ item.storePrice }}</text>
									</text>
								</view>
							</view>
							<!-- 提示框 -->
							<view class="san" v-if='indexs==index'><text class="icon iconfont">&#xe6c1;</text></view>
							<view class="totas" v-if='indexs==index'>
								<view @click="edit(item.id)">
									<view><text class="icon iconfont">&#xe60b;</text></view>
									<view class="text">编辑</view>
								</view>
								<view @click="Offshelf(item.id)">
									<view><text class="icon iconfont">&#xe636;</text></view>
									<view class="text">下架</view>
								</view>
								<view @click="del(item.id)">
									<view><text class="icon iconfont">&#xe604;</text></view>
									<view class="text">删除</view>
								</view>
								<view @click="Promote(index)">
									<view><text class="icon iconfont">&#xe6ff;</text></view>
									<view class="text">推广</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="tag-line"></view>
				<!-- <view class="tag-btn">
					<view class="tag-btn-view">到底线了</view>
					<view class="service-button">
						<button @click="onPrevious" class="service-button-1"><text>发布新服务</text></button>
						<button class="service-button-2" @click="onNext" hover-class="background:#8cc6c4"><text>同步店铺服务</text></button>
					</view>
				</view> -->
				<!-- 模态框 -->
				<view class=""></view>
			</van-tab>

			<!-- 上门服务 -->
			<van-tab title="上门服务" title-style="font-size:32rpx">
				<view class="tag-box">
					<view class="tag-itembox" v-for="(item,index) in HomeServiceList" :key="index">
						<view class="tabItem-left"><image src="/static/images/xitou.jpg" mode=""></image></view>
						<view class="tabItem-right">
							<view class="tabItem-right-1">
								<text space class="tabItem-right-1-text">
									{{ item.serviceName }}
									<text class="text">{{ item.serviceSubdivide }}</text>
								</text>
								<view class="tabItem-tag" @click.stop="showTotas(index)"><text>···</text></view>
								
							</view>
					
							<view class="tabItem-right-2">{{ item.serviceInner }}</view>
							<view class="tabItem-right-3">
								<view class="tabItem-right-3-view">
									<text>时间：预计用时{{ item.serviceTime }}小时</text>
									<text>销售:{{ item.serviceCount }}单</text>
								</view>
								<text class="tabItem-right-3-view-text">
									￥
									<text>{{ item.storePrice }}</text>
								</text>
							</view>
						</view>
						<!-- 提示框 -->
						<view class="san" v-if='indexs1==index'><text class="icon iconfont">&#xe6c1;</text></view>
						<view class="totas" v-if='indexs1==index'>
							<view @click="edit(item.id)">
								<view><text class="icon iconfont">&#xe60b;</text></view>
								<view class="text">编辑</view>
							</view>
							<view @click="Offshelf(item.id)">
								<view><text class="icon iconfont">&#xe636;</text></view>
								<view class="text">下架</view>
							</view>
							<view @click="del(item.id)">
								<view><text class="icon iconfont">&#xe604;</text></view>
								<view class="text">删除</view>
							</view>
							<view @click="Promote(index)">
								<view><text class="icon iconfont">&#xe6ff;</text></view>
								<view class="text">推广</view>
							</view>
						</view>
					</view>
				</view>

				<view class="tag-line"></view>
			<!-- 	<view class="tag-btn">
					<view class="tag-btn-view">到底线了</view>
					<view class="service-button">
						<button @click="onPrevious" class="service-button-1" style="background:#00C6C2;"><text style="color:#FFFFFF;">发布新服务</text></button>
						<button class="service-button-2" @click="onNext" style="background:#FFFFFF;"><text style="color:#00C6C2;">同步店铺服务</text></button>
					</view>
				</view> -->
			</van-tab>

			<!-- 已下架 -->
			<van-tab title="已下架" title-style="font-size:32rpx">
				<view class="tag-box">
					<view class="tag-itembox" v-for="(item,index) in delistingList" :key="index">
						<view class="tabItem-left"><image src="/static/images/xitou.jpg" mode=""></image></view>
						<view class="tabItem-right">
							<view class="tabItem-right-1">
								<text space class="tabItem-right-1-text" style="color: #898989;">
									{{ item.serviceName }}
									<text class="text" style="color: #898989;">{{ item.serviceSubdivide }}</text>
								</text>
								<view class="tabItem-tag" @click.stop="more(index)"><text>···</text></view>
							</view>
				
							<view class="tabItem-right-2" style="color: #898989;">{{ item.serviceInner }}</view>
							<view class="tabItem-right-3">
								<view class="tabItem-right-3-view">
									<text style="color: #898989;">时间：预计用时{{ item.serviceTime }}小时</text>
									<text style="color: #898989;">销售:{{ item.serviceCount }}单</text>
								</view>
								<text class="tabItem-right-3-view-text" style="color: #898989;">
									￥
									<text style="color: #898989;">{{ item.storePrice }}</text>
								</text>
							</view>
						</view>
						<view class="san" v-if='indexs_shelf==index'><text class="icon iconfont">&#xe6c1;</text></view>
						<view class="totas" v-if='indexs_shelf==index'>
							
							<view @click.stop="Onshelf(item.id)">
								<view><text class="icon iconfont">&#xe6d5;</text></view>
								<view class="text">上架</view>
							</view>
							<view @click="del_shelf(item.id)">
								<view><text class="icon iconfont">&#xe604;</text></view>
								<view class="text">删除</view>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="tag-line"></view>
				
			</van-tab>
		</van-tabs>
		<view class="tag-btn">
			<!-- <view class="tag-btn-view">到底线了</view> -->
			<view class="service-button">
				<button @click="onPrevious" class="service-button-1" style="background:#00C6C2;"><text style="color:#FFFFFF;">发布新服务</text></button>
				<button class="service-button-2" @click="onNext" style="background:#FFFFFF;"><text style="color:#00C6C2;">同步店铺服务</text></button>
			</view>
		</view>
		<uni-popup type="bottom" ref="Promote">
			<view class="promote">
				<!-- 分享目标 -->
				
				<view class="aims">
					<view class="one">
						<view @click="share_wx">
							<button open-type="share" plain="true">
								<view >
									<image src="/static/images/weixin.png" mode=""></image>
								</view>
								<view>微信</view>
							</button>
							
						</view>
						<view>
							<view>
								<image src="../../static/images/pyq.png" mode=""></image>
							</view>
							<view>朋友圈</view>
						</view>
						<view>
							<view>
								<image src="../../static/images/weibo.png" mode=""></image>
							</view>
							<view>微博</view>
						</view>
					</view>
					<view class="two">
						<view @click="copyUrl">
							<view>
								<image src="/static/images/copy.png" mode=""></image>
							</view>
							<view>复制链接</view>
						</view>
						<view>
							<view>
								<image src="/static/images/xiaochenxu.png" mode=""></image>
							</view>
							<view>复制二维码</view>
						</view>
					</view>
				</view>
				<!-- 分享取消 -->
				<view class="cancel" @click="cancel">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {getStore,getHomeService,getOffShelf,removeService,closeService,putOnTheShelf} from '@/api/index.js'
export default {
	data() {
		return {
			active: 2,
			services: [
				{ id:0,text: '', text1: '洗 吹', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '68' },
				{ id:1,text: '', text1: '洗剪吹', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '88' },
				{ id:2,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' },
				{ id:3,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' },
				{ id:4,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' },
				{ id:4,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' },
				{ id:4,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' },
				{ id:4,text: '水纹波浪烫', text1: '烫发', text2: '水洗+按摩+造型', text3: '时间：预计1小时', text4: '销售：123单', text5: '1080' }
			],
			Storelist:[],//门店服务列表
			HomeServiceList:[],//上门服务列表
			delistingList:[],//已下架列表
			indexs:null,
			i:0,
			i_shelf:0,
			indexs_shelf:null,
			indexs1:null,
			m_index:0
			
		};
	},
	methods: {
		onPrevious() {
			console.log('点击了按钮1');
			uni.navigateTo({
				url: '/pagesB/service_new/service_new',
				fail(err) {
					console.log(err)
				}
			});
		},
		onNext() {
			console.log('点击了按钮2');
		},

		// 弹出模态框
		onOpenBox() {
			console.log('123');
			uni.showModal({
				title: '提示',
				content: '这是一个模态弹窗',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//显示操作提示框
		showTotas(index){
			this.indexs = index
			this.indexs1 =index
			this.i+=1
			
			if(this.i==2){
				this.indexs = -1
				this.indexs1 =-1
				this.i = 0
				
			}
		},
		//页面点击
		pageClick(){
			this.indexs=null
			this.indexs1=null
			this.indexs_shelf=null
			this.i = 0
			this.i_shelf = 0
		},
		// 点击删除
		del(index){
			let that = this
			that.indexs=-1
			console.log(index)
			uni.showModal({
				title: '删除服务',
				content: '确定要删除这一个服务吗?',
				success: function(res) {
					if (res.confirm) {
						removeService(index).then(ress=>{
							if(ress){
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								that.getStoreInfor()
							}
						}).catch(error=>{
							console.log(error)
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//点击下架
		Offshelf(index){
			let that = this
			that.indexs = -1
			uni.showModal({
				title: '下架服务',
				content: '确定要下架这一个服务吗?',
				success: function(res) {
					if (res.confirm) {
						closeService(index).then(ress=>{
							if(ress){
								uni.showToast({
									icon:"none",
									title:"下架成功"
								})
							}
							that.getStoreInfor()
							that.getOffShelfInfor()
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//点击推广
		Promote(index){
			this.$refs.Promote.open()
		},
		//点击编辑
		edit(index){
			uni.navigateTo({
				url:'/pagesB/service_new/service_new?id='+index,
				fail(err) {
						console.log(err)
				}
			})
		},
		//点击取消
		cancel(){
			this.$refs.Promote.close()
		},
		
		//已下架点击更多
		more(index){
			console.log(index)
			this.indexs_shelf = index
			
			this.i_shelf+=1
			
			if(this.i_shelf==2){
				this.indexs_shelf = -1
				this.i_shelf = 0
				
			}
		},
		
		//已下架点击上架
		Onshelf(index){
			console.log(index)
			let that = this
			that.indexs_shelf = -1
			uni.showModal({
				title: '上架服务',
				content: '确定要上架这一个服务吗?',
				success: function(res) {
					if (res.confirm) {
						putOnTheShelf(index).then(ress=>{
							console.log(ress)
							uni.showToast({
								title:ress[1].data.message,
								icon:'none'
							})
							that.getOffShelfInfor()
							that.getStoreInfor()
						}).catch(Error=>{
							console.log(Error)
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//已下架点击删除
		del_shelf(index){
			console.log(index)
			let that = this
			// that.indexs_shelf = -1
			uni.showModal({
				title: '删除服务',
				content: '确定要删除这一个服务吗?',
				success: function(res) {
					if (res.confirm) {
						removeService(index).then(ress=>{
							console.log(ress)
							uni.showToast({
								title:ress[1].data.message,
								icon:'none'
							})
							that.getOffShelfInfor()
							
						}).catch(Error=>{
							console.log(Error)
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//点击分享给微信好友
		share_wx(){
			
		},
		ff(){
			uni.showShareMenu({  
			  withShareTicket: true,  
			  menus: ['shareAppMessage', 'shareTimeline']  
			})
		},
		//复制链接
		copyUrl(){
			
		},
		//查询门店服务
		getStoreInfor(){
			let that = this
			getStore().then(res=>{
				
				let result = that.checkedId(res[1].data)
				that.Storelist = result.data
				// console.log(result,"=============================")
			})
			},
			//处理雪花id
			checkedId(str){
				var _str = str
					for(var i = true; i == true;){
						var i = /[:][0-9]{18,}[,]?/.test(_str) 
						if(i == true){
						var handlestr = /[:][0-9]{18,}[,]?/.exec(_str)
						var handlestr2 = /[0-9]{18,}/.exec(handlestr[0])
						_str = _str.replace(handlestr[0], ':"'+handlestr2[0]+'",')
						}
					}
					_str = _str.replace(/[,][}]/g,'}')
					return JSON.parse(_str)
			},
		//查询上门服务
		getHomeServiceInfor(){
			let that = this
			getHomeService().then(res=>{
				
				let result = that.checkedId(res[1].data)
				that.HomeServiceList = result.data
				// console.log('xxxxxxxxxxxxxxxxxx上门服务',result)
			}).catch(err=>{
				console.log(err)
			})
		},
		//查询已经下架
		getOffShelfInfor(){
			let that = this 
			getOffShelf().then(res=>{
				
				let result = this.checkedId(res[1].data)
				that.delistingList = result.data
				console.log('已下架',that.delistingList)
				
			}).catch(err=>{
				console.log(err)
			})
		}
	},
	onLoad() {
		this.ff()
	},
	created() {
		this.getStoreInfor()
		this.getHomeServiceInfor()
		this.getOffShelfInfor()
		
	},
	/*
	 * uniapp微信小程序分享页面到微信好友
	*/
	onShareAppMessage() {
		
		 
	},
	
	/*
	 * uniapp微信小程序分享页面到微信朋友圈
	*/
	onShareTimeline() {
		
	},
};
</script>
<style>
	@import './index.css';
</style>
<style scoped lang="less">
//提示操作框
.totas{
	width: 400rpx;
	height: 105rpx;
	background-color: #00C6C2;	
	opacity: 0.9;
	border-radius: 4rpx;
	position: absolute;
	bottom: 0;
	right: 52rpx;
	display: flex;
	justify-content: space-around;
	font-size: 18rpx;
	.iconfont{
		color: #FFFFFF;
		opacity: 0.8;
	}
	.text{
		
		font-size: 20rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.8;
	}
	
}
.san{
	position: absolute;
	top: 66rpx;
	right: 52rpx;
	opacity: 0.9;
	color: #00C6C2;	
	z-index: 99;
}

//推广
.promote{
	width: 100%;
	height: 607rpx;
	background-color: white;
	//分享目标
	.aims{
		padding: 46rpx 73rpx;
		border-bottom: 1rpx solid #E0E0E0;
		.one{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			button{
				background: white;
				 border: none;
			}
		}
		.two{
			display: flex;
			align-items: center;
			text-align: center;
			view{
				flex:2;
			}
		}
		image{
			width: 80rpx;
			height: 80rpx;
		}
		
	}
	//分享取消
	.cancel{
		text-align: center;		
		font-size: 40rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #676767;
		line-height:100rpx;
		}
}
</style>
